<template>
    <ul>
         <li v-for="(item,index) in list" :key="index" :class="{active: checkIndex == index}" @click="cut(index)">{{item}}</li>
     </ul> 
</template>
<script>
export default {
    data(){
    return {
      list: ['女装','童装','宠物装','中老年装','男装'],
      checkIndex: 0, // 选中标签的索引
    }
  },
  methods: {
    cut(i){
      this.checkIndex = i;
      this.$store.commit('add',this.list[i]);
    }
  },
}
</script>

<style>
  ul{
    display: flex;
    list-style: none;
    align-items: center;
  }
  li{
    width: 100px;
    text-align: center;
  }
  .active{
    color: red;
  }
</style>